import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { getRecommendToplistAction } from '../../store/actionCreators';

import DTopRanking from '@/components/top-ranking'
import DThemeHeader from "@/components/theme-header-rcm";
import {
  RecommendToplistWrapper
} from "./style";



export default memo(function DRecommendToplist() {

  const { uplist, newlist, prevlist } = useSelector(state => ({
    uplist: state.getIn(["recommend", "uplist"]),
    newlist: state.getIn(["recommend", "newlist"]),
    prevlist: state.getIn(["recommend", "prevlist"])
  }), shallowEqual)

  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getRecommendToplistAction(0))
    dispatch(getRecommendToplistAction(2))
    dispatch(getRecommendToplistAction(3))
  }, [dispatch])

  return (
    <RecommendToplistWrapper>
      <DThemeHeader title="榜单" />
      <div className="tops">
        <DTopRanking info={uplist}/>
        <DTopRanking info={newlist}/>
        <DTopRanking info={prevlist}/>
      </div>
    </RecommendToplistWrapper>
  )
})
